<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head th:replace="page/common/head"></head>

<body>
<!--导航-->
<th:block th:replace="page/common/nav"></th:block>
<!--轮播-->
<div class="swiper-container swiper-container1">
    <div class="swiper-wrapper">
        <!--/*@thymesVar id="siteDto" type="com.healthtop.dto.SiteDto"*/-->
        <th:block th:each=" m : ${siteDto.navImages}">
            <div class="swiper-slide"><img th:src="${m.image}" width="100%" height="auto"/></div>
        </th:block>
    </div>
    <div class="swiper-button-next p768"></div>
    <div class="swiper-button-prev p768"></div>
    <style>
        /*改变了颜色和加粗的样式*/
        .swiper-button-next{background-image:url("/images/next.png");}
        .swiper-button-prev{background-image:url("/images/prev.png");}
    </style>
</div>

<section class="container">

    <div >
        <h4 class="text-center" style="color: #73BE1F;">NEWS</h4>
        <h3 class="blockTtl en">最新信息</h3>
        <div class="wrap">
            <ul class="newsListModule">

                <!--/*@thymesVar id="siteDto" type="com.healthtop.dto.SiteDto"*/-->
                <th:block th:each="m : ${siteDto.news}">
                    <li th:class="${m.type}=='0' ? 'news' : 'active'" >
                        <a th:href="@{'/site/forwardNews?id='+${m.id}}" class="link">
                            <span class="date" th:text="${#dates.format(m.createTime,'yyyy-MM-dd HH:mm:ss')}"></span>
                            <span class="note" th:text="${m.newsTitle}"></span>
                        </a>
                    </li>
                </th:block>
                <!-- .newsListModule // -->
            </ul>

            <!-- .wrap // -->
        </div>
    </div>

    <div class="p768" style="height: 100px;"></div>

    <div>
        <h3 class="blockTtl en">作品展示</h3>
        <div class="contest">
            <div class="contestcont">
                <div class="ctn">
                    <div class="contctn">
                        <ul>
                            <!--/*@thymesVar id="siteDto" type="com.healthtop.dto.SiteDto"*/-->
                            <li th:each="m : ${siteDto.studentWorks}" style="border: 1px solid #e3e1d7;">
                                <a th:href="@{'/site/forwardStudentWorks?id='+${m.id}}">
                                    <img style="height: 200px;width: 335px;" th:src="${m.worksImage}">
                                    <h5 style="text-align: center;color: #333;font-size: 14px;margin-top: 5px;" th:text="${m.worksTitle}"></h5>
                                    <p style="text-align: center;" th:text="${m.worksDescribe}"></p>
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>

</section>

<!--底部-->
<th:block th:replace="page/common/footer"></th:block>


</body>

</html>

<script>
    function wiper() {
        var sum;
        if($(window).width() >= 420){sum = 3;}else{sum=1;}
        var swiper1 = new Swiper('.swiper-container1', {
            paginationClickable: true,
            nextButton: '.swiper-button-next',
            prevButton: '.swiper-button-prev',
            spaceBetween: 60,
            centeredSlides: true,
            autoplay: 2000,
            autoplayDisableOnInteraction: false
        });
        var swiper2 = new Swiper('.swiper-container2', {
            slidesPerView: sum,
            paginationClickable: true,
            spaceBetween: 10,
            nextButton: '.swiper-button-next',
            prevButton: '.swiper-button-prev',
        });
    }

    $(function () {
        wiper();
    });

    $(window).resize(function () {
        wiper();
    });
</script>

